<template>
  <div class="m-t-10px">
    <!-- 个人标签 -->
    <KoiAuthor></KoiAuthor>
    <div class="flex flex-justify-center m-t-16px">
      <!-- 左侧卡片 -->
      <div class="backdrop-blur-md bg-[rgba(255,255,255,0.25)] border-1px border-solid border-[--el-color-primary-light-8] dark:border-[rgba(255,255,255,0.5)] dark:bg-[rgba(0,0,0,0.5)] p-20px rounded-15px shadow-md min-w-260px h-888px">
        <!-- 期望目标 -->
        <div class="flex flex-col m-b-8px">
          <div class="text-18px font-bold m-b-8px p-b-6px border-t-0 border-x-0 border-b-1px border-solid border-#AAAAAA text-[--el-text-color-primary]">
            期望目标
          </div>
          <div
            class="text-14px m-b-6px p-b-6px text-#303536 dark:text-#F7F7F7 border-t-0 border-x-0 border-b-1px border-solid border-#DDD"
          >
            求职岗位：全栈工程师
          </div>
          <div
            class="text-14px m-b-6px p-b-6px text-#303536 dark:text-#F7F7F7 border-t-0 border-x-0 border-b-1px border-solid border-#DDD"
          >
            工作经验：5年
          </div>
          <div
            class="text-14px m-b-6px p-b-6px text-#303536 dark:text-#F7F7F7 border-t-0 border-x-0 border-b-1px border-solid border-#DDD"
          >
            期望薪资：10000元
          </div>
        </div>
        <!-- 个人信息 -->
        <div class="flex flex-col m-b-8px">
          <div class="text-18px font-bold m-b-8px p-b-6px border-t-0 border-x-0 border-b-1px border-solid border-#AAAAAA text-[--el-text-color-primary]">
            个人信息
          </div>
          <div
            class="text-14px m-b-6px p-b-6px text-#303536 dark:text-#F7F7F7 border-t-0 border-x-0 border-b-1px border-solid border-#DDD"
          >
            年龄：25岁
          </div>
          <div
            class="text-14px m-b-6px p-b-6px text-#303536 dark:text-#F7F7F7 border-t-0 border-x-0 border-b-1px border-solid border-#DDD"
          >
            性别：男
          </div>
          <div
            class="text-14px m-b-6px p-b-6px text-#303536 dark:text-#F7F7F7 border-t-0 border-x-0 border-b-1px border-solid border-#DDD"
          >
            籍贯：河南
          </div>
          <div
            class="text-14px m-b-6px p-b-6px text-#303536 dark:text-#F7F7F7 border-t-0 border-x-0 border-b-1px border-solid border-#DDD"
          >
            电话：18593114301
          </div>
          <div
            class="text-14px m-b-6px p-b-6px text-#303536 dark:text-#F7F7F7 border-t-0 border-x-0 border-b-1px border-solid border-#DDD"
          >
            邮箱：1736306607@qq.com
          </div>
        </div>
        <!-- 教育背景 -->
        <div class="flex flex-col m-b-8px">
          <div class="text-18px font-bold m-b-8px p-b-6px border-t-0 border-x-0 border-b-1px border-solid border-#AAAAAA text-[--el-text-color-primary]">
            教育背景
          </div>
          <div
            class="text-14px m-b-6px p-b-6px text-#303536 dark:text-#F7F7F7 border-t-0 border-x-0 border-b-1px border-solid border-#DDD"
          >
            学校：河南工业大学
          </div>
          <div
            class="text-14px m-b-6px p-b-6px text-#303536 dark:text-#F7F7F7 border-t-0 border-x-0 border-b-1px border-solid border-#DDD"
          >
            专业：计算机科学与技术
          </div>
          <div
            class="text-14px m-b-6px p-b-6px text-#303536 dark:text-#F7F7F7 border-t-0 border-x-0 border-b-1px border-solid border-#DDD"
          >
            毕业时间：2019年9月
          </div>
        </div>
        <!-- 技能特长 -->
        <div class="flex flex-col m-b-8px">
          <div class="text-18px font-bold m-b-8px p-b-6px border-t-0 border-x-0 border-b-1px border-solid border-#AAAAAA text-[--el-text-color-primary]">
            技能特长
          </div>
          <div class="m-b-6px">
            <div class="text-13px m-b-4px">SpringBoot</div>
            <el-progress :percentage="80" />
          </div>
          <div class="m-b-6px">
            <div class="text-13px m-b-4px">Vue2/Vue3</div>
            <el-progress :percentage="80" color="#1989fa" />
          </div>
          <div class="m-b-6px">
            <div class="text-13px m-b-4px">Uniapp</div>
            <el-progress :percentage="70" color="#67C23A" />
          </div>
          <div class="m-b-6px">
            <div class="text-13px m-b-4px">TypeScript</div>
            <el-progress :percentage="70" color="#E6A23C" />
          </div>
          <div class="m-b-6px">
            <div class="text-13px m-b-4px">SpringCloud Alibaba</div>
            <el-progress :percentage="50" color="#F56C6C" />
          </div>
          <div class="m-b-6px">
            <div class="text-13px m-b-4px">Redis</div>
            <el-progress :percentage="80" color="#FC7830" />
          </div>
          <div class="m-b-6px">
            <div class="text-13px m-b-4px">MySQL</div>
            <el-progress :percentage="80" color="#909399" />
          </div>
        </div>
      </div>

      <!-- 右侧卡片 -->
      <div class="backdrop-blur-md bg-[rgba(255,255,255,0.25)] border-1px border-solid border-[--el-color-primary-light-8] dark:border-[rgba(255,255,255,0.5)] <xl:hidden overflow-x-auto dark:bg-[rgba(0,0,0,0.5)] p-15px rounded-15px shadow-md m-l-16px max-w-900px">
        <!-- 项目时间线 -->
        <KoiTimeline></KoiTimeline>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import KoiAuthor from "./components/KoiAuthor.vue";
import KoiTimeline from "./components/KoiTimeline.vue";
</script>

<style scoped>

</style>
